<template>
  <tr>
    <th>
      <input type="checkbox" v-model="check" />
    </th>
    <th>{{ name }}</th>
    <th>{{ price }}</th>
    <th>
      <button @click="jianshao">-</button>
      {{ num }}
      <button @click="add">+</button>
    </th>
    <th>{{ num * price }}</th>
    <th><button @click="del">删除</button></th>
  </tr>
</template>

<script>
export default {
  // 存数据的地方
  data() {
    return { check: this.checked }
    // 子组件里的data的check的值是props接收父组件传过来的checked的值
    // 父组件每传一次 就会重新赋值 不是false就是true
  },
  props: ['name', 'price', 'num', 'index', 'checked', 'list'],
  methods: {
    del() {
      this.$emit('del', this.index)
    },
    add() {
      this.$emit('Add', this.index, 1)
    },
    jianshao() {
      this.$emit('jianshao', this.index, 1)
    },
  },
  //
  //
  watch: {
    checked: {
      deep: true,
      // watch中需要具体执行的方法
      handler() {
        this.check = this.checked
      },
    },
    // check: {
    //   deep: true,
    //   handler() {
    //     this.$emit('chec', this.check, this.ind)
    //   },
    // },
  },
}
</script>

<style></style>
